<template>
  <div class="contentCate">
    <el-card class="box-card" v-if="status === 'index'">
      <el-row>
        <el-input v-model="searchParams.id" clearable placeholder="请输入用户id" style="width:200px" size="mini"></el-input>
        <el-date-picker v-model="searchParams.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择起始时间"
          size="mini" style="width:150px"></el-date-picker>
        <el-date-picker v-model="searchParams.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择结束时间"
          size="mini" style="width:150px"></el-date-picker>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getData"
          v-if="has('feedback/index')">搜索</el-button>
      </el-row>

      <el-row>
        总充值：{{ data.total_recharge }} 总兑换价：{{
          data.total_pay
        }}
        总盈亏：{{ data.diff_amount }}
      </el-row>
      <el-table :data="data.data" v-loading="table_loading" row-key="id" style="width: 100%;margin:10px auto"
        size="mini" :header-cell-style="{ background: '#f3f8fe', color: '#333' }">
        <el-table-column fixed prop="id" label="用户id" align="center"></el-table-column>
        <el-table-column prop="recharge_amount" label="总充值" align="center"></el-table-column>
        <el-table-column prop="give_balance" label="赠送总额" align="center"></el-table-column>
        <el-table-column prop="take_balance" label="发货总额" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>待收货总额: {{ scope.row.dsh_take_balance }}</p>
              <p>待发货总额: {{ scope.row.dfh_take_balance }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.take_balance || 0 }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="recovery_price" label="余额" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>赏袋总额: {{ scope.row.sd_balance }}</p>
              <p>用户余额: {{ scope.row.balance }}</p>
              <p>发货总额: {{ scope.row.take_balance }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.recovery_price || 0 }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="recovery_price" label="总亏损" align="center">
           <template slot-scope="scope">
           <span v-if="(scope.row.zks_balance * 1) > 0" style="color:green">{{
            (scope.row.zks_balance * 1).toFixed(2) }}</span>
           <span v-else style="color:red">{{
            (scope.row.zks_balance * 1).toFixed(2)
          }}</span>
           </template>
           </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="balcceRecord(scope.row.id)">余额记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background style="text-align:center;margin:20px 0;" :current-page="searchParams.page"
        :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="data.total" @size-change="changeSize"
        @current-change="changePage"></el-pagination>

      <el-dialog :title="'余额记录(' + recordId + ')'" :visible.sync="centerDialogVisible" width="80%" center :show-close="false">
        <template>
          <el-row>
            <el-date-picker v-model="startdiageTime" type="date" value-format="yyyy-MM-dd" placeholder="选择起始时间"
              size="mini" style="width:150px"></el-date-picker>
            <el-date-picker v-model="enddiageTime" type="date" value-format="yyyy-MM-dd" placeholder="选择结束时间"
              size="mini" style="width:150px"></el-date-picker>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="diageserch">搜索</el-button>
          </el-row>
          <el-table :data="logData.data" :close-on-click-modal="false" v-loading="logTableLoading"
            style="width: 100%;margin:10px auto" size="mini"
            :header-cell-style="{ background: '#f3f8fe', color: '#333' }">
            <el-table-column prop="currn_recharge_balance" label="今日充值" align="center"></el-table-column>
            <el-table-column prop="jb_balance" label="金币余额" align="center"></el-table-column>
            <el-table-column prop="zs_balance" label="钻石余额" align="center"></el-table-column>
            <el-table-column prop="give_balance" label="赠送总额" align="center"></el-table-column>
            <el-table-column prop="prize_total_balance" label="赏品总额" align="center"></el-table-column>
            <el-table-column prop="prize_lock_balance" label="保险柜总额" align="center"></el-table-column>
            <el-table-column prop="box_bag_balance" label="宝箱总额" align="center"></el-table-column>
            <el-table-column prop="take_order_balance" label="提货总额" align="center"></el-table-column>
            <el-table-column prop="total_balance" label="总余额" align="center"></el-table-column>
            <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>
          </el-table>
          <el-pagination background style="text-align:center;margin:20px 0;" :current-page="diagePage"
            :page-sizes="pageSizes" layout="total,prev, pager, next,sizes" :total="logtotalSize"
            @size-change="changeSizeduage" @current-change="changePageduage"></el-pagination>
        </template>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="closeDiage">关 闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import api from "../../api/api.js";
export default {
  name: "contentCate",
  data() {
    return {
      status: "index", // 页面控制
      data: [], // 表格诗句
      table_loading: true, // 表格加载中
      loading: false, //全局加载中
      pageSizes: [1, 10, 20, 50, 100, 200, 500, 800, 1000, 2000], // 每页条数默认10
      searchParams: {
        page: 1,
        limit: 10,
        mobile: "",
        userId: ""
      },
      activeValue: 1,
      inactiveValue: 0,
      centerDialogVisible: false,
      logData: [],
      logTableLoading: false,
      recordId: '',
      startdiageTime: '',
      enddiageTime: '',
      logtotalSize: '',
      diagePage: 1,
      diageLimit: 10,
    };
  },
  created() {
    this.getData();
  },

  methods: {
    balcceRecord(item) {
      this.recordId = item
      this.logTableLoading = true;
      api.userBalances
        .index({
          params: {
            user_id: this.recordId,
            page: this.diagePage,
            limit: this.diageLimit,
            startTime: this.startdiageTime,
            endTime: this.enddiageTime
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.logTableLoading = false;
            this.logData = res.data.data;
            this.logtotalSize = res.data.data.total
            this.centerDialogVisible = true
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    closeDiage() {
      this.startdiageTime = ''
      this.enddiageTime = ''
      this.diagePage = 1
      this.diageLimit = 10
      this.centerDialogVisible = false
    },
    diageserch() {
      this.balcceRecord(this.recordId)
    },
    // 加载中
    load() {
      this.loading = this.$loading({
        lock: true,
        text: "数据加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    // 取消加载
    unload() {
      this.loading.close();
    },
    changeStatus(e) {
      this.load();
      api.feedback
        .status(e.id, { status: e.status })
        .then(res => {
          this.unload();
          if (res.data.code === 200) {
            this.$message.success("保存成功");
            this.init();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 获取所有数据
    getData() {
      this.table_loading = true;
      api.userRanks
        .list({
          params: {
            // 搜索参数
            id: this.searchParams.id,
            levelId: "",
            catId: "",
            page: this.searchParams.page,
            limit: this.searchParams.limit,
            challenge_box_id: "",
            startTime: this.searchParams.startTime,
            endTime: this.searchParams.endTime
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.table_loading = false;
            this.data = res.data.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 重置搜索参数重新搜索
    reset() {
      this.init();
      this.getData();
    },
    // 初始化
    init() {
      this.searchParams.page = 1;
      this.searchParams.mobile = "";
      this.searchParams.userId = "";
    },
    // 改变每页条数时
    changeSize(limit) {
      this.searchParams.limit = limit;
      this.getData();
    },
    // 改变当前页码时
    changePage(page) {
      this.searchParams.page = page;
      this.getData();
    },
    // 改变弹窗每页条数时
    changeSizeduage(limit) {
      this.diageLimit = limit;
      this.balcceRecord(this.recordId)
    },
    // 改变弹窗当前页码时
    changePageduage(page) {
      this.diagePage = page;
      this.balcceRecord(this.recordId)
    }
  }
};
</script>

<style scoped lang="less">
.contentCate {
  margin: 0 auto;

  .search {
    margin: 0 auto 10px auto;
  }
}
</style>
